<template>
  <div style="width: 100%;height: 100%;display: flex;" v-if="userflag==true">
    <div>
      <div style="height: 60px;width: 150px;padding: 50px;background-color: #004e9b;">
        <!-- <img src="" alt=""> -->
        <div style="margin-left: 30px;margin-top: -20px;">
          <img src="../src/assets/logo.png" alt="" style="width: 80px;height: 60px;">
        </div>
        <div>
          <span style="font-size: 18px;font-weight: 600;color: white;">
            教育行业管理系统
          </span>
        </div>
        <div>
          <span style="font-size: 12px;font-weight: 600;color: #54aaff;">
            {{nowDate}}{{nowTime}}
          </span>
        </div>
      </div>
      <div style="color: white;background-color: #004e9b;height: 460px;width: 210px;padding: 20px;">
        <div style="height: 40px;line-height: 40px;font-weight: 600;margin-left: 20px;" @click="syflag">
          系统首页
        </div>
        <div>
          <div style="height: 40px;line-height: 40px;font-weight: 600;margin-left: 20px;" @click="jiaoshi=!jiaoshi">
            教师管理
          </div>
          <div v-if="jiaoshi==true">
            <div  style="height: 40px;line-height: 40px;font-weight: 600;margin-left: 20px;" @click="tealistflag">
              <span style="font-size: 16px;color: black;">
                ¤↦
              </span>教师列表
            </div>
            <div  style="height: 40px;line-height: 40px;font-weight: 600;margin-left: 20px;" @click="addteaflag">
              <span style="font-size: 16px;color: black;">
                ¤↦
              </span>新增教师
            </div>
            <div  style="height: 40px;line-height: 40px;font-weight: 600;margin-left: 20px;">
              <span style="font-size: 16px;color: black;">
                ¤↦
              </span>教师介绍
            </div>
          </div>
        </div>
        <div>
          <div style="height: 40px;line-height: 40px;font-weight: 600;margin-left: 20px;" @click="xuesheng=!xuesheng">
            学生管理
          </div>
          <div v-if="xuesheng==true">
            <div  style="height: 40px;line-height: 40px;font-weight: 600;margin-left: 20px;" @click="stulistflag">
              <span style="font-size: 16px;color: black;">
                ¤↦
              </span> 所有学生
            </div>
            <div  style="height: 40px;line-height: 40px;font-weight: 600;margin-left: 20px;">
              <span style="font-size: 16px;color: black;">
                ¤↦
              </span>新增学生
            </div>
            <div  style="height: 40px;line-height: 40px;font-weight: 600;margin-left: 20px;">
              <span style="font-size: 16px;color: black;">
                ¤↦
              </span>学生详情
            </div>
            <div  style="height: 40px;line-height: 40px;font-weight: 600;margin-left: 20px;">
              <span style="font-size: 16px;color: black;">
                ¤↦
              </span>成绩管理
            </div>
          </div>
        </div>

      </div>
    </div>
    <div style="height: 660px;width: 1200px;background-color: aqua;">
      <div style="height: 80px;background-color: #004e9b;line-height: 80px;display: flex;">
        <div style="width: 250px;height: 40px;background-color: #54aaff;margin-top: 20px;margin-left: 100px;line-height: 35px;border-radius: 20px;">
          <input type="text" style="height: 30px;width: 200px;border: none;padding: 5px; outline: none;color: white;margin-left: 20px;background-color: #54aaff;" placeholder="输入关键词">
        </div>
      </div>
      <div style="height: 580px;background-color: aliceblue;" v-if="sy==true">
        <div style="height: 300px;background-color: aliceblue;display: flex;">
          <div style="width: 50%;background-color: green;">
            <div style="background-color: aliceblue;width: 600px;height: 50%;display: flex;">
              <div style="width: 46%;height: 80%;background-color:white;margin: 3%;">
                <div style="margin-left: 10px;margin-top: 10px;color: black;">
                  <div>
                    学生总数
                  </div>
                  <div style="font-weight: 600;">
                    3250{{}}
                  </div>
                  <div>
                    <el-progress :percentage="60" color="orange">
                      <el-button text></el-button>
                    </el-progress>
                  </div>
                  <div>
                    <span>
                      20天内增加{{20}}%
                    </span>
                  </div>
                </div>
              </div>
              <div style="width: 46%;height: 80%;background-color:white;margin: 3%;">
                <div style="margin-left: 10px;margin-top: 10px;color: black;">
                  <div>
                    新生
                  </div>
                  <div style="font-weight: 600;">
                    230{{}}
                  </div>
                  <div>
                    <el-progress :percentage="60" color="yellow">
                      <el-button text></el-button>
                    </el-progress>
                  </div>
                  <div>
                    <span>
                      20天内增加{{20}}%
                    </span>
                  </div>
                </div>
              </div>
            </div>
            <div style="background-color: aliceblue;width: 600px;height: 50%;display: flex;">
              <div style="width: 46%;height: 80%;background-color:white;margin: 3%;">
                <div style="margin-left: 10px;margin-top: 10px;color: black;">
                  <div>
                    总课程
                  </div>
                  <div style="font-weight: 600;">
                    32{{}}
                  </div>
                  <div>
                    <el-progress :percentage="60">
                      <el-button text></el-button>
                    </el-progress>
                  </div>
                  <div>
                    <span>
                      20天内增加{{76}}%
                    </span>
                  </div>
                </div>
              </div>
              <div style="width: 46%;height: 80%;background-color:white;margin: 3%;">
                <div style="margin-left: 10px;margin-top: 10px;color: black;">
                  <div>
                    收费
                  </div>
                  <div style="font-weight: 600;">
                    ￥3250{{'.00'}}
                  </div>
                  <div>
                    <el-progress :percentage="60" color="green">
                      <el-button text></el-button>
                    </el-progress>
                  </div>
                  <div>
                    <span>
                      20天内增加{{20}}%
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div style="width: 580px;height: 90%;background-color: white;margin-top: 1.6%;margin-left: 6px;">
            
          </div>
        </div>
        <div style="height: 42%;background-color: aliceblue;margin-top: 2%;width: 96%;margin-left: 20px;display: flex;">
          <div style="width: 38%;background-color: white;height: 100%;">
            <span style="color: black;font-weight: 600;margin-top: 15px;margin-left: 10px;">
              老师名单
            </span>
            <el-table :data="tealist" height="225" style="width: 100%">
              <el-table-column prop="teaname" label="" width="80">
                <el-image style="width: 70px; height: 60px" src="touxiang"/>
              </el-table-column>
              <el-table-column prop="teaname" label="" width="180" />
              <el-table-column label="操作">
                <el-button>
                  查看档案
                </el-button>
              </el-table-column>
            </el-table>
          </div>
          <div style="width: 60%;background-color: white;height: 100%;margin-left: 2%;">
            <span style="color: black;font-weight: 600;margin-top: 15px;margin-left: 10px;">
              学生名单
            </span>
            <el-table :data="stulist" height="225" style="width: 100%">
              <!-- <el-table-column prop="teaname" label="学生名称" width="80">
                <el-image style="width: 70px; height: 60px" src="touxiang"/>
              </el-table-column> -->
              <el-table-column prop="stuname" label="学生名称" width="180" />
              <el-table-column prop="tea" label="班主任" width="180" />
              <el-table-column prop="create_date" label="入学时间" />
              <el-table-column label="操作">
                <el-button>
                  查看档案
                </el-button>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <div v-if="stuli==true">
        <Stu/>
      </div>
      <div v-if="teali==true">
        <Tea/>
      </div>
      <div v-if="addtea==true">
        <Addtea/>
      </div>
    </div>
  </div>
  <!-- <router-view /> -->
</template>
<script>
import { errmsg, get, sessmsg } from './utils/request';
import index from './views/index.vue';
import Stu from './views/stu.vue';
import Tea from './views/tea.vue';
import Addtea from './views/addtea.vue';
export default {
  components: { index, Stu, Tea, Addtea },
  data() {
    return {
      nowDate: null,    //存放年月日变量
      nowTime: null,   //存放时分秒变量
      timer: "",           //定义一个定时器的变量
      currentTime: new Date(),       // 获取当前时间

      viewname: '',
      view: '',
      userflag: true,
      tealist: [

      ],
      stulist: [

      ],
      sy: false,
      jiaoshi: false,
      xuesheng: false,
      stuli: false,
      teali: false,
      addtea: false,
    }
  },
  created() {
    this.timer = setInterval(this.getTime, 1000);
  },
  methods: {

    addteaflag() {
      this.sy = false
      this.stuli = false
      this.teali = false
    },
    stulistflag() {
      this.sy = false
      this.stuli = true
      this.teali = false
    },
    syflag() {
      this.sy = true
      this.teali = false
      this.stuli = false
    },
    tealistflag() {
      this.sy = false
      this.stuli = false
      this.teali = true
    },
    getTime() {
      const date = new Date();
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const day = date.getDate();
      const hour = date.getHours();
      const minute = date.getMinutes();
      const second = date.getSeconds();
      const str = ''
      if (this.hour > 12) {
        this.hour -= 12;
        this.str = "下午 ";
      } else {
        this.str = "上午 ";
      }
      this.month = check(month);
      this.day = check(day);
      this.hour = check(hour);
      this.minute = check(minute);
      this.second = check(second);
      function check(i) {
        const num = (i < 10) ? ("0" + i) : i;
        return num;
      }
      // this.nowDate = year + "年" + this.month + "月" + this.day + "日";
      this.nowDate = year + '/' + this.month + "/" + this.day;
      this.nowTime = this.str + this.hour + ":" + this.minute + ":" + this.second;

    },
    getHE() {
      get('aaa/')
        .then((result) => {
          console.log(result);
        }).catch((err) => {
          console.log(err);
        });
    },
    getTea() {
      get('http://127.0.0.1:5000/jiaoyu/tea')
      .then((resp) => {
        console.log(resp);
        if (resp.data.code==200) {
          sessmsg(resp.data.msg)
          this.tealist = resp.data.tea_list
        }
        else {
          errmsg(resp.data.msg)
        }
      }).catch((err) => {
        console.log(err);
      });
    },
    getStu() {
      get('http://127.0.0.1:5000/jiaoyu/stu')
      .then((resp) => {
        console.log(resp);
        if (resp.data.code==200) {
          sessmsg(resp.data.msg)
          this.stulist = resp.data.stu_list
        }
        else {
          errmsg(resp.data.msg)
        }
      }).catch((err) => {
        console.log(err);
      });
    },
    getUser() {
      if (localStorage.getItem('user_id')==undefined) {
        this.userflag = false
        this.$router.push('/')
      }
    },
  },
  mounted() {
      this.sy= true
      this.getTea()
      this.getStu()
      this.getUser()
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer); // 在Vue实例销毁前，清除定时器
    }
  },
}
</script>
<style>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.demo-tabs .custom-tabs-label .el-icon {
  vertical-align: middle;
}
.demo-tabs .custom-tabs-label span {
  vertical-align: middle;
  margin-left: 4px;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  
  color: #54aaff;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>
